<template>
	 <div class="item2" >
    <div class="charts" ref="ele"></div>
   </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, reactive, ref } from 'vue';
import { queryAllBuildHyg } from '@/utils/axios/master';

const ele=ref()
let myEcharts


const option=reactive({
  title:{
    text:"所有楼栋卫生评比",  
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: getBuilds(20),
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '卫生检查成绩',
      type: 'bar',
      barWidth: '60%',
      data:[]
    },
    
  ],

})


function getBuilds(number){
  let build=[]
  for(let i=1;i<=number;i++){
    build.push(`橙园 ${i}栋`)
  }

  return build
}

async function init() {
	myEcharts = echarts.init(ele.value)
  let {data} =await queryAllBuildHyg()
  console.log(data);
  // data=data.map((i)=>i/400)

  option.series[0].data=data
	myEcharts.setOption(option)
}

onMounted( ()=>{ 
 init()
})
</script>

<style scoped lang="scss">
  .item2{
    width: 100%;
    height:390px;

  }
  .charts{
    width: 100%;
    height: 100%;
  }
</style>
